<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>第二阶段考核作业</title>
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<style type="text/css">
			*{ margin: 0;padding: 0 }
			img{ border: none }
			body{ font: 14px/24px 'Microsoft YaHei', '宋体’.'"Helvetica Neue", Helvetica, Arial, sans-serif'' }
			.wp{width: 70.17%;height: 100%;margin: 0px auto;}
			.wp2{width: 70.17%;height: 80px;margin: 0px auto;}
			.wp_center{width: 70.17%;height: 80px;margin: 0px auto;}
			.wp_foot{width: 72.4%;height: 80px;margin: 0px auto;}
			.top{
				background-color: black;width: 100%;
				color: #d8d8d8;margin: 0px;
				height: 24px ; line-height: 24px;
			}
			.top_header{
				padding: 0px; height: 24px;
			}
			.top_font{
				font-size:medium ;padding: 0px;
			}
			.top_font span{
				float:right;text-align: right;
			} 
			.top_header a{
				text-decoration: none; color: white;
			}
			.top a:hover{
    			color: red;
			}
			
			#message_button{
				font-size: large; cursor: pointer;
			}
			
			#wangye{
				list-style: none;
				float: left;
    			line-height: 24px;
    			text-decoration: none;
			}
			#wangye li {
				float: left;
			}
			.header_768{
				text-align: center;
		    	width: 100%;
		    	height: 24px;
		    	align-items: center;
		    	justify-content:center;
		    	display: flex;
			}
			.date{
				float:none;
			    display:inline-block;
			  	margin-left: auto;
			  	margin-right: auto;
			}
			#hide_message{
				width: 100%;
				list-style: none;
				background-color: #000000;
				color: #EEEEEE;
				text-align: center;
				float: none;
				margin-bottom: 0px;
			}
			
			.search{
				margin: 0px auto;
				color: #000000;
			}
			
			.s_r{
				width: 30%;
				background: url(img/s_r.jpg) no-repeat;
			}
			.s_r button{
				width: 100%;
			    height: 41px;
			    background: none;
			    border: 0px;
			    cursor: pointer;
			}
			.maizi{
				list-style: none;
				margin: 0px auto;
			}
			.maizi li{
				float: left;
			}
			
			.daohang{
				width: 100%;
				height: 38px;
				background: url(img/nav_bg.jpg) repeat-x;
			}
			
			.daohang li{
			    list-style: none;
			    float: left;
			    line-height: 38px;
			    padding:  0px 2%;
			}
			
			.daohang li.a , .daohang li:hover{
			    background: url(img/nav_hover.jpg) repeat-x;
			}
			
			.daohang a{
			    color: #fff;
			    font-size:16px;
			    text-decoration: none;
			}
			
			.jianjie{
				width: 100%;
			    height: auto;
			    background: url(img/jianjie.jpg) no-repeat;
			    float: left;
			    margin-top: 10px;
			}
			.xian{
			    padding-bottom: 8px;
			    border-bottom: 1px solid darkred;
			    position: relative;
			    margin-bottom: 10px;
			    margin-top: 40px;
			}
			.xian span {
			 	position: absolute;
			    right: 0;
			    bottom: 0;
			}
			.xian a {
			    color: darkred;
			    text-decoration: none;
			}
			.jianjie img{
			    float: left;
			    margin: 0 10px 10px 0;
			}
			.jianjie p{
				color: #616161;
			    text-indent: 24px;
			}
			
			.hangye{
				width: 100%;
				height: auto;
				background: url(img/xinwen.jpg) no-repeat;
				float: right;
				margin-top: 10px;
			}
			.hangye li{
			    list-style: none;
			    height: 24px;
			    line-height: 24px;
			    position: relative;
			    padding-left: 15px;
			    margin-bottom: 6px;
			    background: url(img/list_bg.jpg) no-repeat center left;
			}
			.hyxw li.a{
			    background: none;
			    padding: 0;
			    height: 76px;
			}
			.hyxw li img{
			    float: left;
			    margin: 0 10px 10px 0;
			}
			.hyxw span{
				position: absolute;
				right: 0px;
				bottom: 0px;
			    font-size: 10px;
			    color: #888888;
			}
			.hyxw h3{
			    font-weight: normal;
			    font-size: 14px;
			    margin: 5px 0px 5px 0px;
			}
			.hyxw a{
			    color: #616161;
			    text-decoration: none;
			
			}
			.hyxw p{
			    font-size: 12px;
			    color: #888;
			    text-indent: 24px;
			}
			
			.chanpin{
				width: 100%;
				
				margin: 0px auto;
			}
			.cptj{
				width: 100%;
			    height: 96px;
			    background: url(img/chanpin.jpg) no-repeat;
			    float: left;
			    margin-top: 10px;
			}
			.chanpin li{
			    float: left;
			    list-style: none;
			    margin: 0 10px 10px 0;
			    
			    overflow: hidden;
			    position: relative;
			}
			.chanpin span{
			    display: none;
			    position: absolute;
			    bottom: 0;
			    left: 0;
			    font-size: 14px;
			    height: 20px;
			    width: 100%;
			    padding: 0 10px;
			    color: #fff;
			    background: darkred;
			    overflow: hidden;
			}
			.chanpin li a:hover span{
			    display: block;
			}
			.chanpin li img{
			    float: left;
			}
			.chanpin li.mr_0{
			    margin-right: 0;
			}
			
			.foot{
				height: 103px;
			    width: 100%;
			    background: url(img/footer_bg.jpg) repeat-x;
			    margin: 0px auto;
			}
			.foot_top{
			    width: 100%;
			    line-height: 80px;
			    color: #fff;
			  	float: left;
			  	font-size: 16px;
			}
			.foot_top a{
				text-decoration: none;
				color: white;
			}
			.foot_top span{
				float: right;
			}
			.foot_bottom{
				width: 100%;
				height: 24px;
				line-height: 24px;
				color: #f60;
			}
			.foot_bottom a{
				text-decoration: none;
				color: #888;
				margin-right: 10px;
			}
						
			@media (max-width: 768px) {
				
				.wp{
					display: none;
				}
				
				.daohang{
					display: none;
				}
				.show_768{
					display: none;
				}
				.wp_foot{
					width: 100%;
				}
			}
			@media (max-width: 960px) {
				
				.wp2{
					display: none;
				}
			}
			@media (max-width: 1089px) {
				.daohang a{
					font-size:13px ;
				}
				.wp_foot a,.wp_foot span{
					font-size: 10px;
				}
			}
			@media (max-width: 872px) {
				
				.daohang a{
					font-size:12px ;
				}
				.daohang li{
					padding: 0px 1.2% 0px 1.2%;
				}
			}
			@media (min-width: 768px) {
				
				.header_768 {
					display: none;
				}
				
				.ul_768{
					display: none;
				}
			}

		</style>
		<script type="text/javascript">
			$(function(){
				$('#message_button').click(function(){
					$('#hide_message').toggle('slow',);
				})
				$('#sousuo_button').click(function(){
					$('#serach').toggle('slow',);
				})
			})	
		</script>
	</head>
	<body>
		<div class="top">
			<div class="wp">
				<div class="container-fluid top_header">
					<div class="col-md-12 top_font">
						<ul id="wangye">
							<li><a href="#">收藏本页</a></li>
							<li><a href="#">&nbsp;设为主页</a></li>
						</ul>
						<span>2015年5月1日&nbsp;多云16℃/30℃</span>	
					</div>
				</div>
			</div>
			<div class="header_768">
				<span id='message_button'>。。。</span>
				<span class="date">2015年5月1日&nbsp;多云16℃/30℃</span>
			</div>
			<div class="ul_768">
				<ul id="hide_message">
					<li><a href="#">收藏本页</a></li>
					<li><a href="#">设为主页</a></li>
					<li><a href="#">网站首页</a></li>
					<li><a href="#">公司简介</a></li>
					<li><a href="#">业务描述</a></li>
					<li><a href="#">服务范围</a></li>
					<li><a href="#">产品中心</a></li>
					<li><a href="#">人才管理</a></li>
					<li><a href="#">在线留言</a></li>
					<li><a href="#">联系我们</a></li>
					<li><a data-toggle = "collapse" data-target="#serach">搜索</a></li>
					<li id="serach">
						<form action="index.html" method="get" >
							<table cellpadding="0" cellspacing="0" border="0" class="search">
								<tr>
									<td><input type="text" name="serach" value=""/></td>
									<td>
										<button type="submit" name="submit">搜索</button>
									</td>
								</tr>
							</table>
						</form>
					</li>
				</ul>
				<div class="container-fluid" style="margin-top: 0px; padding-top: 0px;">
					<div class="col-md-12">
						<div style="width: 72%;margin: 0px auto;">
							<img src="img/ad.jpg" class="img-responsive"/>
						</div>
					</div>
				</div>
				<div class="container-fluid">
					<div class="row wp_center" style="margin: 0px auto; width: 72%;">
						<div class="col-md-7" style="padding-left:0px ;">
							<div class="jianjie" >
								<div class="xian">
									<span>
										<a href="">more</a>
									</span>
								</div>
								<div>
									<img src="img/jianjie_img.jpg"  alt="maiziedu"/>
									<p>
					            	    麦子学院是成都麦子信息技术有限公司旗下一个IT在线教育平台，目前已有30万注册用户，10万以上APP下载量，5000小时视频内容。 我们从不说空话，专注于IT在线教育，脱离传统教育的束缚，让你走哪学哪，想学就学。逗比的老师，贴心的助教，在这儿你能感受到来自五 湖四海伙伴们热情和踏实的学习态度！
					                </p>
					                <p>
					            	             什么都不会没关系，想跳槽想加薪都可以，提升自己更不在话下。 只要你愿意，绝对为你找到一份相当靠谱的工作！成就你，我能行！
					                </p>
					                <p>
					            	            那么多的梦想，你不想实现？买的起大奔的人会天天挤公交吗？ 想成为成功人士，脑袋里必须要有知识。一切不以要付出为目的的梦想都是耍流氓！ LPS系统、每周直播课、学习作业快速批改、保就业、班主任助教全程跟踪。 你看，离你完成梦想的道路是不是近了很多。
					                </p>
								</div>
							</div>
						</div>
						<div class="col-md-5" style="padding-left: 0px; padding-right: 0px;">
							<div class="hangye">
								<div class="xian">
									<span>
										<a href="">more</a>
									</span>
								</div>
								<div class="a" style="color: #616161;padding-bottom: 5px;">
					                <a href="" style="text-decoration: none;">
					                    <img src="img/list_img.jpg" alt="" style="float: left; padding-right:10px "/>
					                    <h3 style="font-weight: normal;font-size: 14px;margin: 5px 0px 5px 0px;color: #888888;">Web前端开发之HTML+CSS基础入门</h3>
					                    <p style="font-size: 10px; color: #888888; text-indent: 24px;">麦子学院朱朝兵老师带领大家从HTML语法，基本结构到CSS入门DIV+Css布局,通俗易懂  ... ...</p>
					                </a>
					            </div>
								<div class="hyxw">
									<ul>
					                    
					                    <li>
					                        <a href=""> 
					                            <h3>Web前端开发之HTML+CSS基础入门</h3>
					                            <span>2015-05-15</span>
					                        </a>
					                    </li>
					                    <li>
					                        <a href="">
					                            <h3>Web前端开发之HTML+CSS基础入门</h3>
					                            <span>2015-05-15</span>
					                        </a>
					                    </li>
					                    <li>
					                        <a href="">
					                            <h3>Web前端开发之HTML+CSS基础入门</h3>
					                            <span>2015-05-15</span>
					                        </a>
					                    </li>
					                    <li>
					                        <a href="">
					                            <h3>Web前端开发之HTML+CSS基础入门</h3>
					                            <span>2015-05-15</span>
					                        </a>
					                    </li>
					                    <li>
					                        <a href="">
					                            <h3>Web前端开发之HTML+CSS基础入门</h3>
					                            <span>2015-05-15</span>
					                        </a>
					                    </li>
					                    <li>
					                        <a href="">
					                            <h3>Web前端开发之HTML+CSS基础入门</h3>
					                            <span>2015-05-15</span>
					                        </a>
					                    </li>
					                    <li>
					                        <a href="">
					                            <h3>Web前端开发之HTML+CSS基础入门</h3>
					                            <span>2015-05-15</span>
					                        </a>
					                    </li>
					                </ul>
					            </div>
							</div>
						</div>	
					</div>
				</div>
			</div>
		</div>
		
		<div class="wp2">
			<div class="container-fluid">
				<div class="row">
					<div class="col-md-10">
						<ul class="maizi">
							<li style="width: 30%; padding-right: 2.5%;"><img src="img/logo.jpg" class="img-responsive" /></li>
							<li style="width: 30%; padding-top: 10px; padding-right: 2.5%;">
								<form action="index.html" method="get" >
									<table cellpadding="0" cellspacing="0" border="0" style="width: 100%; height: 42px;">
										<tr>
											<td class="form-group" style="height: 80%;">
												<input style="margin-bottom: 3px;" no-repeat;" type="sousuo" class="form-control" placeholder="输入搜索的内容">
											</td>
											<td class="form-group">
												<button type="submit" name="submit" style="border: 0px; height: 80%;" >
													<img src="img/s_r.jpg" class="img-responsive" />
												</button>
											</td>
										</tr>
									</table>
							   </form>
							</li>
							<li style="width: 30%;"><img src="img/dianhua.jpg" class="img-responsive" style="padding-top: 15px;"/></li>
						</ul>
					</div>
				</div>	
			</div>
		</div>
		
		<div class="container-fluid">
			<div class="row" style="margin-top: 0px;padding-top: 0px;">
				<div class="col-xs-12" style="padding: 0px;">
					<div class="daohang">
						<div class="wp">
							<ul>
				                <li class="a">
				                    <a href="index.html">网站首页</a>
				                </li>
				                <li>
				                    <a href="index.html">公司简介</a>
				                </li>
				                <li>
				                    <a href="index.html">业务描述</a>
				                </li>
				                <li>
				                    <a href="index.html">服务范围</a>
				                </li>
				                <li>
				                    <a href="index.html">产品中心</a>
				                </li>
				                <li>
				                    <a href="index.html">人才管理</a>
				                </li>
				                <li>
				                    <a href="index.html">在线留言</a>
				                </li>
				                <li>
				                    <a href="index.html">联系我们</a>
				                </li>
			            	</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="container-fluid show_768" style="margin-top: 0px; padding-top: 0px;">
			<div class="col-md-12">
				<div style="width: 73.4%;margin: 0px auto;">
					<img src="img/ad.jpg" class="img-responsive"/>
				</div>
			</div>
		</div>
		
		<div class="container-fluid">
			<div class="row wp" style="margin: 0px auto; width: 72%;">
				<div class="col-md-7" style="padding-left:0px ;">
					<div class="jianjie" >
						<div class="xian">
							<span>
								<a href="">more</a>
							</span>
						</div>
						<div>
							<img src="img/jianjie_img.jpg"  alt="maiziedu"/>
							<p>
			            	    麦子学院是成都麦子信息技术有限公司旗下一个IT在线教育平台，目前已有30万注册用户，10万以上APP下载量，5000小时视频内容。 我们从不说空话，专注于IT在线教育，脱离传统教育的束缚，让你走哪学哪，想学就学。逗比的老师，贴心的助教，在这儿你能感受到来自五 湖四海伙伴们热情和踏实的学习态度！
			                </p>
			                <p>
			            	             什么都不会没关系，想跳槽想加薪都可以，提升自己更不在话下。 只要你愿意，绝对为你找到一份相当靠谱的工作！成就你，我能行！
			                </p>
			                <p>
			            	            那么多的梦想，你不想实现？买的起大奔的人会天天挤公交吗？ 想成为成功人士，脑袋里必须要有知识。一切不以要付出为目的的梦想都是耍流氓！ LPS系统、每周直播课、学习作业快速批改、保就业、班主任助教全程跟踪。 你看，离你完成梦想的道路是不是近了很多。
			                </p>
						</div>
					</div>
				</div>
				<div class="col-md-5" style="padding-left: 0px; padding-right: 0px;">
					<div class="hangye">
						<div class="xian">
							<span>
								<a href="">more</a>
							</span>
						</div>
						<div class="a" style="color: #616161;padding-bottom: 5px;">
			                <a href="" style="text-decoration: none;">
			                    <img src="img/list_img.jpg" alt="" style="float: left; padding-right:10px "/>
			                    <h3 style="font-weight: normal;font-size: 14px;margin: 5px 0px 5px 0px;color: #888888;">Web前端开发之HTML+CSS基础入门</h3>
			                    <p style="font-size: 10px; color: #888888; text-indent: 24px;">麦子学院朱朝兵老师带领大家从HTML语法，基本结构到CSS入门DIV+Css布局,通俗易懂  ... ...</p>
			                </a>
			            </div>
						<div class="hyxw">
							<ul> 
			                    <li>
			                        <a href=""> 
			                            <h3>Web前端开发之HTML+CSS基础入门</h3>
			                            <span>2015-05-15</span>
			                        </a>
			                    </li>
			                    <li>
			                        <a href="">
			                            <h3>Web前端开发之HTML+CSS基础入门</h3>
			                            <span>2015-05-15</span>
			                        </a>
			                    </li>
			                    <li>
			                        <a href="">
			                            <h3>Web前端开发之HTML+CSS基础入门</h3>
			                            <span>2015-05-15</span>
			                        </a>
			                    </li>
			                    <li>
			                        <a href="">
			                            <h3>Web前端开发之HTML+CSS基础入门</h3>
			                            <span>2015-05-15</span>
			                        </a>
			                    </li>
			                    <li>
			                        <a href="">
			                            <h3>Web前端开发之HTML+CSS基础入门</h3>
			                            <span>2015-05-15</span>
			                        </a>
			                    </li>
			                    <li>
			                        <a href="">
			                            <h3>Web前端开发之HTML+CSS基础入门</h3>
			                            <span>2015-05-15</span>
			                        </a>
			                    </li>
			                    <li>
			                        <a href="">
			                            <h3>Web前端开发之HTML+CSS基础入门</h3>
			                            <span>2015-05-15</span>
			                        </a>
			                    </li>
			                </ul>
			            </div>
					</div>
				</div>	
			</div>
			
			<div class="container-fluid">
				<div class="row" style="width: 75%;margin: 0px auto;">
					<div class="col-md-12 chanpin" style="padding-left: 0px;padding-right: 0px;">
						<div class="cptj">
							<div class="xian">
								<span>
									<a href="">more</a>
								</span>
							</div>
						</div>
						 <ul>
				            <li><a href=""><img src="img/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
				            <li><a href=""><img src="img/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
				            <li><a href=""><img src="img/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
				            <li><a href=""><img src="img/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
				            <li><a href=""><img src="img/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
				            <li class="mr_0"><a href=""><img src="img/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
				            <li><a href=""><img src="img/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
				            <li><a href=""><img src="img/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
				            <li><a href=""><img src="img/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
				            <li><a href=""><img src="img/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
				            <li><a href=""><img src="img/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
				            <li class="mr_0"><a href=""><img src="img/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
				        </ul>
					</div>
				</div>	
			</div>
		</div>
		
		<div class="foot" style="margin-top: 20px;">
			<div class="container-fluid" style="padding: 0px;">
				<div class="col-md-12" style="padding-left: 0px; padding-right: 0px;">
					<div class="wp_foot">
						<div class="foot_top">
							<a href="">关于我们</a>
							<a href="">| 联系我们</a>
							<a href="">| 加入我们</a>
							<a href="">| 给我留言</a>
							<span> 
								© 2015 麦子学院版权所有 ICP证:蜀ICP备13000000号-1
							</span>
						</div>
						<div class="foot_bottom">
							友情链接：
							<a href="http://www.maiziedu.com" target="_blank">麦子学院</a>
							<a href="http://www.dz7.com.cn" target="_blank">起点网</a>
							<a href="http://www.maiziedu.com">麦子学院</a>
							<a href="http://www.maiziedu.com">教育部</a>
							<a href="http://www.maiziedu.com">新闻网</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		
	</body>
</html>
